<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>FlowCss - Components</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes"> 
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="description" content="redefining standard browser style standards" />
    <meta name="keywords" content="reset css, reset styles of browser, css reset"/>
	<meta name="robots" content="index, follow">
	<meta name="author" content="AlexDK">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="stylesheet" href="../../../css/flowcss.css">
</head>
<body>
  <section class="container py-30">
    <h1 class="color-green-4 mb-30">Cards components</h1>

    <div class="card mb-30 w-100 w-md-50">
      <div class="card-faxa"></div>
      <h5 class="card-header bg-blue-4">Header</h5>
      <div class="card-content">
        <h3 class="card-title">Title</h3>
        <p class="card-text">My card text, i love programming and web developer, its framework css is awesome</p>
      <button class="btn ghost-btn-blue-4">Button</button>
      </div>
      <h5 class="card-footer bg-blue-4">Footer</h5>
    </div>

    <div class="card mb-30 w-100 w-md-50">
      <img class="card-img-top" src="https://tlgur.com/d/g05nk7X4"/>
      <div class="card-content">
        <h3 class="card-title">My title</h3>
        <h5 class="card-subtitle color-gray-2">My sub-title</h5>

        <p class="card-text">My card text, i love programming and web developer, its framework css is awesome</p>
        <p class="card-text">My card text, i love programming and web developer, its framework css is awesome</p>
      </div>
    </div>

    <div class="card mb-30 w-100 w-md-50">
      <div class="card-content">
        <h3 class="card-title">My title</h3>
        <h5 class="card-subtitle color-gray-2">My sub-title</h5>
        <p class="card-text">My card text, i love programming and web developer, its framework css is awesome</p>
        <p class="card-text">My card text, i love programming and web developer, its framework css is awesome</p>
      </div>
      <img class="card-img-bottom" src="https://tlgur.com/d/g05nk7X4"/>
    </div>

    <div class="card mb-30 w-100 w-md-50">
      <div class="row g-0">
        <div class="col-4 bg-red-4">
          <span class="color-white bold-700">Image</span>
        </div>
        <div class="col-8">
          <div class="card-content">
            <h3 class="card-title">My title</h3>
            <p class="card-text">My card text, i love programming and web developer, its framework css is awesome</p>
            <p class="card-text">My card text, i love programming and web developer, its framework css is awesome</p>
          </div>
        </div>
      </div>
    </div>

    <h1 class="color-green-4 mb-30">Spinners components</h1>

    <div class="spinner-spaced color-primary mb-20"></div>
    <div class="spinner-arrow color-success mb-20"></div>
    <div class="spinner-border color-info mb-20"></div>
    <div class="spinner-arrow-triple color-warning mb-20"></div>
    
    <h1 class="color-green-4 mb-30 ">Tooltips components</h1>


    <button class="btn ghost-btn-primary tooltips d-block m-auto">
      <div class="tooltip tooltip-left color-red-4">
        <p>My tooltip is red</p>
      </div>
      Tooltip left
    </button>

    <button class="btn ghost-btn-primary tooltips d-block m-auto">
      <div class="tooltip tooltip-right color-yellow-5">
        <p>My tooltip is yellow</p>
      </div>
      Tooltip right
    </button>

    <button class="btn ghost-btn-primary tooltips d-block m-auto">
      <div class="tooltip tooltip-bottom color-indigo-4">
        <p>My tooltip is indigo</p>
      </div>
      Tooltip bottom
    </button>
 
    <button class="btn ghost-btn-primary tooltips d-block m-auto">
      <div class="tooltip tooltip-top color-green-4">
        <p>My tooltip is green</p>
      </div>
      Tooltip top
    </button>

    <h1 class="color-green-4 my-30">Blockquote components</h1>

    <blockquote class="long-quote color-red-4 mb-10">
      <h3 class="mb-10">My quote</h3>
      <p class="text">Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
    </blockquote>

    <div class="long-quote-x color-primary">
      <h3 class="mb-10">My quote</h3>
      <p class="text">Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
    </div> 
    
    <h1 class="color-green-4 my-30">Alerts components</h1>
   
    <div class="alert alert-danger">
      <h3 class="mb-30">Danger!!</h3>
      <p>Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
      <button class="btn-close" data-flow-hide="alert"><i class="fa fa-times"></i></button>
    </div>

    <div class="alert alert-success">
      <h3 class="mb-30">Success!</h3>
      <p>Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
      <button class="btn-close" data-flow-hide="alert"><i class="fa fa-times"></i></button>
    </div>

    <h1 class="color-green-4 my-30">Pagination components</h1>

    <ul class="pagination mb-20">
      <li class="page-controll">Prev</li>
      <li class="page-link"><a href="#">1</a></li>
      <li class="page-link"><a href="#">2</a></li>
      <li class="page-link"><a href="#">3</a></li>
      <li class="page-link"><a href="#">4</a></li>
      <li class="page-link"><a href="#">5</a></li>
      <li class="page-controll">Next</li>
    </ul>

    <ul class="pagination my-20 pagination-orange">
      <li class="page-controll"><i class="fas fa-chevron-left"></i></li>
      <li class="page-link"><a href="#">1</a></li>
      <li class="page-link"><a href="#">2</a></li>
      <li class="page-link"><a href="#">3</a></li>
      <li class="page-link"><a href="#">4</a></li>
      <li class="page-link"><a href="#">5</a></li>
      <li class="page-controll"><i class="fas fa-chevron-right"></i></li>
    </ul>

    <ul class="pagination my-20 pagination-default">
      <li class="page-controll"><i class="fas fa-chevron-left"></i></li>
      <li class="page-link"><a href="#">1</a></li>
      <li class="page-link"><a href="#">2</a></li>
      <li class="page-link"><a href="#">3</a></li>
      <li class="page-link"><a href="#">4</a></li>
      <li class="page-link"><a href="#">5</a></li>
      <li class="page-controll"><i class="fas fa-chevron-right"></i></li>
    </ul>
  
    <h1 class="color-green-4 my-30">Progress components</h1>

    <div class="progress">
      <div class="progress-bar bg-green-4 w-30">30%</div>
    </div>

    <div class="progress">
      <div class="progress-bar gradient-db w-50">50%</div>
    </div>

    <h1 class="color-green-4 my-30">Roadmap components</h1>

    <div class="roadmap">
      <div class="roadmap-item" data-roadmap="1" >
        <div class="roadmap-content">
          <h3 class="mb-20">Roadmap item</h3>
          <p>Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
        </div>
      </div>
      <div class="roadmap-item" data-roadmap="2" >
        <div class="roadmap-content">
          <h3 class="mb-20">Roadmap item</h3>
          <p>Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
          Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
        </div>
      </div>
      <div class="roadmap-item" data-roadmap="3" >
        <div class="roadmap-content">
          <h3 class="mb-20">Roadmap item</h3>
          <p>Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
        </div>
      </div>
    </div>
    
    <h1 class="color-green-4 my-30">Accordion components</h1>

    <div class="accordion accordion-warning" id="accordionExampleOne">      
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" data-fw-toggle="accordion" data-fw-target="#accordionOne">
            Accordion item 1
            <i class="accordion-icon fas fa-chevron-down"></i>
          </button>
        </h2>
        <div class="accordion-content" id="accordionOne">
          <div class="accordion-body">
            <p>Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" data-fw-toggle="accordion" data-fw-target="#accordionTwo">
            Accordion item 2
            <i class="accordion-icon fas fa-chevron-down"></i>
          </button>
        </h2>
        <div class="accordion-content" id="accordionTwo">
          <div class="accordion-body">
            <p>Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" data-fw-toggle="accordion" data-fw-target="#accordionThree">
            Accordion item 3
            <i class="accordion-icon fas fa-chevron-down"></i>
          </button>
        </h2>
        <div class="accordion-content" id="accordionThree">
          <div class="accordion-body">
            <p>Until we get over the yearning for boundless love, we cannot grow emotionally.</p>
          </div>
        </div>
      </div>
    </div>

    <h1 class="color-green-4 my-30">Accordion components</h1>

    <h1>Example heading <span class="badge bg-primary">New</span></h1>
    <h2>Example heading <span class="badge bg-primary">New</span></h2>
    <h3>Example heading <span class="badge bg-primary">New</span></h3>
    <h4>Example heading <span class="badge bg-primary">New</span></h4>
    <h5>Example heading <span class="badge bg-primary">New</span></h5>
    <h6>Example heading <span class="badge bg-primary">New</span></h6>
    <p>Example heading <span class="badge bg-primary">7</span></p>
   
  </section>
  
  <script src="../../../js/flowcss.js"></script>
</body>
</html>
